<template>
  <div class="dashboard-editor-container">
    <div>
      <el-card>
        <el-form :model="ruleForm" style="margin-top:10px;" size="mini" label-position="top" ref="ruleForm">
          <el-row :gutter="10">
            <el-col :lg="4" :md="6">
              <el-form-item label="批次号" prop="BATCHNO">
              <!-- <el-select v-model="ruleForm.BATCHNO" size="mini" clearable placeholder="请选择批次号">
                <el-option v-for="item in batchOption" :key="item.BATCHNO" :label="item.BATCHNO"
                  :value="item.BATCHNO"></el-option>
              </el-select> -->
                <el-input size="mini" v-model="ruleForm.BATCHNO" placeholder="请输入批次号"></el-input>
            </el-form-item>
            </el-col>
            <!-- <el-col :lg="4" :md="6">
              <el-form-item label="客户等级" prop="CUSTOMLEVEL">
                <el-select v-model="ruleForm.CUSTOMLEVEL" size="mini" clearable placeholder="请选择采集方式">
                  <el-option v-for="item in levelOption" :value="item.key" :key="item.key" :label="item.label">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col> -->
            <el-col :lg="4" :md="6">
              <el-form-item label="渠道" prop="CHANNELTYPE">
                <el-select v-model="ruleForm.CHANNELTYPE" size="mini" clearable placeholder="请选择渠道">
                  <el-option v-for="item in channelOption" :key="item.FIELDKEY" :label="item.FIELDVALUE"
                    :value="item.FIELDKEY"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <!-- <el-col :lg="4" :md="6">
              <el-form-item label="业务类型" prop="BUSINESSTYPE">
                <el-select v-model="ruleForm.BUSINESSTYPE" size="mini" clearable placeholder="请选择业务类型">
                  <el-option v-for="item in typeOption" :value="item.key" :key="item.key" :label="item.label">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col> -->
            <!-- <el-col :lg="4" :md="6">
              <el-form-item label="多媒体类型" prop="MEDIATYPE">
                <el-select v-model="ruleForm.MEDIATYPE" size="mini" clearable placeholder="请选择多媒体类型">
                  <el-option v-for="item in mediaOption" :key="item.FIELDKEY" :label="item.FIELDVALUE"
                    :value="item.FIELDKEY"></el-option>
                </el-select>
              </el-form-item>
            </el-col> -->
            <!-- <el-col :lg="4" :md="6">
              <el-form-item label="坐席级别" prop="AGENTLEVEL">
                <el-select v-model="ruleForm.AGENTLEVEL" size="mini" clearable placeholder="请选择坐席级别">
                  <el-option v-for="item in agentOption" :value="item.key" :key="item.key" :label="item.label">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col> -->
            <el-col :lg="4" :md="6">
              <el-form-item label="抽样标识" prop="TASKFLAG">
                <el-select v-model="ruleForm.TASKFLAG" size="mini" clearable placeholder="请选择抽样标识">
                  <el-option v-for="item in taskOption" :value="item.key" :key="item.key" :label="item.label">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item label="任务状态" prop="TASKSTATUS">
                <el-select v-model="ruleForm.TASKSTATUS" size="mini" clearable placeholder="请选择任务状态">
                  <el-option v-for="item in taskStuatsOption" :value="item.key" :key="item.key" :label="item.key+'-'+item.label">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item label="开始日期" prop="BATCHBEGINDATE">
                <el-date-picker size="mini" style="width:100%;" v-model="ruleForm.BATCHBEGINDATE" type="date"
                  value-format="yyyyMMdd" :clearable='false' placeholder="开始日期" :picker-options="pickerOptionsStart"
                  @change="changeStart">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item label="结束日期" prop="BATCHENDDATE">
                <el-date-picker style="width:100%;" size="mini" v-model="ruleForm.BATCHENDDATE" type="date"
                  value-format="yyyyMMdd" placeholder="结束日期" :picker-options="pickerOptionsEnd" @change="changeEnd"
                  :clearable='false'>
                </el-date-picker>
              </el-form-item>
            </el-col>
            <!-- <el-col :lg="4" :md="6">
              <el-form-item label="分配标识" prop="QUALIFLAG">
                <el-select v-model="ruleForm.QUALIFLAG" size="mini" clearable placeholder="请选择分配标识">
                  <el-option v-for="item in QUALIFLAGOption" :value="item.key" :key="item.key" :label="item.label">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col> -->
            <el-col :lg="6" :md="6" class="searchBtnMarginTop" >
              <el-button type="primary" icon="el-icon-search" :loading="loading" size="mini" @click="queryData">查询
              </el-button>
              <el-button type='warning' size='mini' icon='el-icon-refresh' @click="clearForm('ruleForm')">重置</el-button>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
    </div>
    <el-row style="margin-top:20px">
      <el-col>
        <el-card>
          <!-- <el-button type="success" @click="saveSampleData" size="mini" :disabled="currentRow.length<1">保存为抽样数据 -->
          <!-- </el-button> -->
          <el-row>
            <el-col :md="24" :lg="20">
              <el-button type="primary" size="mini" icon='el-icon-more'  :disabled="currentRow.length!=1" @click="detail">查看详情</el-button>
            </el-col>
          </el-row>
          
          <el-table :data="tableData" @selection-change="handleCurrentChange" class="tableMarginTop" border
            highlight-current-row ref="tableData">
            <!-- <el-table-column type="selection" width="40px"></el-table-column> -->
            <!-- <el-table-column prop='COLLECTSERNO' label='采集流水号' width="100"></el-table-column> -->
            <el-table-column type="selection" width="40px"></el-table-column>
            <el-table-column prop='TASKID' label='任务号' align="center"></el-table-column>
            <el-table-column prop='OPERAWORKDATE' label='抽样日期' width="100" align="center"></el-table-column>
            <el-table-column prop='SAMPLFLAG' label='抽样方式' align="center" :formatter="dataFormat"></el-table-column>
            <el-table-column prop='SAMPLER' label='抽样人员' width="100" align="center"></el-table-column>
            <el-table-column prop='BATCHNO' label='采集批次号' width="100" align="center"></el-table-column>
            <el-table-column prop='BATCHDATE' label='采集日期' width="100" align="center"></el-table-column>
            <el-table-column prop='COLLECTSERNO' label='采集流水号' width="100" align="center"></el-table-column>
            <el-table-column prop='CHANNELTYPE' label='渠道类型' align="center" :formatter="dataFormat"></el-table-column>
            <el-table-column prop='TASKDATE' label='任务分配日期' width="100" align="center"></el-table-column>             
            <el-table-column prop='TASKBEGINDATE' label='任务规定开始日期' width="100" align="center"></el-table-column> 
            <el-table-column prop='TASKENDDATE' label='任务规定结束日期' width="100" align="center"></el-table-column> 
            <el-table-column prop='TASKSTATUS' label='任务状态' align="center" :formatter="dataFormat"></el-table-column>            
            <el-table-column prop='TASKFLAG' label='任务方式' align="center" :formatter="dataFormat"></el-table-column>
            <el-table-column prop='QUALITER' label='质检员' align="center" width="120"></el-table-column>
            <el-table-column prop='QUALITDATE' label='质检日期' align="center" width="120"></el-table-column>
            <el-table-column prop='SCORE' label='得分' align="center" width="120"></el-table-column>
            <el-table-column prop='APPEALFLAG' label='申诉标识' align="center" width="120" :formatter="dataFormat"></el-table-column>

            <!-- <el-table-column prop='SESSIONID' label='会话ID' width="100" align="center"></el-table-column>
            <el-table-column prop='CUSTOMER' label='客户姓名' align="center"></el-table-column>
            <el-table-column prop='CUSTOMLEVEL' label='客户等级' align="center" :formatter="dataFormat"></el-table-column>
            <el-table-column prop='TELNUMBER' label='电话号码' align="center" width="110"></el-table-column>
            <el-table-column prop='CUSTOMIDTYPE' label='证件类型' align="center" :formatter="dataFormat"></el-table-column>
            <el-table-column prop='CUSTOMIDNO' label='客户证件号' align="center" width="120"></el-table-column>
            <el-table-column prop='CALLTYPE' label='呼叫类型' align="center" :formatter="dataFormat"></el-table-column>
            <el-table-column prop='AREA' label='运营地区' align="center"></el-table-column>
            <el-table-column prop='AGENTID' label='坐席ID' align="center"></el-table-column>
            <el-table-column prop='AGENTNAME' label='坐席姓名' align="center"></el-table-column>
            <el-table-column prop='AGENTLEVEL' label='坐席级别' align="center" :formatter="dataFormat"></el-table-column>
            <el-table-column prop='EXTNO' label='分机号' align="center"></el-table-column>
            <el-table-column prop='TEAM' label='班组' align="center"></el-table-column>
            <el-table-column prop='SKILL' label='技能组' align="center"></el-table-column>
            <el-table-column prop='MEDIATYPE' label='多媒体类型' align="center" width="100" :formatter="dataFormat"></el-table-column>
            
            <el-table-column prop='BEGINTIME' label='会话开始时间' align="center" width="110"></el-table-column>
            <el-table-column prop='ENDTIME' label='会话结束时间' align="center" width="110"></el-table-column>
            <el-table-column prop='SESSIONTIME' label='会话持续时长' align="center" width="110"></el-table-column>
            <el-table-column prop='BRNO' label='机构号' align="center"></el-table-column>
            <el-table-column prop='BUSINESSTYPE' label='业务类型' align="center" :formatter="dataFormat"></el-table-column>
            <el-table-column prop='COLLECTFLAG' label='采集方式' align="center" :formatter="dataFormat"></el-table-column>
            <el-table-column prop='FILEPATH' label='音视频文件路径' align="center" width="120"></el-table-column> -->
            
          </el-table>
          <div style="text-align:right;margin-top:20px;" v-show="this.tableData">
            <el-pagination :current-page="currentPage" background @size-change="handleSizeChange"
              :page-sizes="[10,25,50,100]" :page-size="pageSize" layout="total,sizes, prev, pager, next, jumper"
              :total="tableTotal" @current-change="changePage"></el-pagination>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <component :is="dialogList.detailDialog" :option="detailOptions"></component>
  </div>
</template>

<script>
  // 发送接口
  import getGlobalParams from "@/common/utils/getGlobalParams";
  import request from "@/common/utils/requestQC";
  // import dataSave from "@/message/QCManage/sampleManage/saveSampleData/saveSampleData";
  import dataQuery from "@/message/QCManage/sampleManage/sampleResultManage/querySampling";
  import toolBox from "@/common/utils/toolBox";
  import dictionary from '@/message/wfm/baseData/dictionaryManage/dictionaryQuery';
  import requestWFM from "@/common/utils/requestWFM";
  import detailDialog from "./dialog/detailDialog";

  //批量上传
  export default {
    name: '',
    data() {
      return {
        dialogList: {
          detailDialog,
        },
        detailOptions: {
          isShow: false,
          title: "",
          row: {}
        },
        pickerOptionsStart: {
          disabledDate: (time) => {
            return time.getTime() > Date.now()
          }
        },
        pickerOptionsEnd: {
          disabledDate: (time) => {
            return time.getTime() > Date.now()
          }
        },
        currentRow: [],
        appealOption:[{'code':'0','value':'否'},{'code':'1','value':'是'}],
        levelOption: [{
            key: '001',
            label: '非VIP'
          },
          {
            key: '002',
            label: 'VIP黄金级'
          },
          {
            key: '003',
            label: 'VIP铂金级'
          },
          {
            key: '004',
            label: 'VIP钻石级'
          },
        ],
        channelOption: [],
        typeOption: [{
            key: '0',
            label: '账务类'
          },
          {
            key: '1',
            label: '签约类'
          },
          {
            key: '2',
            label: '信息维护类'
          },
          {
            key: '3',
            label: '账户类'
          },
          {
            key: '4',
            label: '理财类'
          },
        ],
        mediaOption: [],
        agentOption: [{
            key: '001',
            label: '一星'
          },
          {
            key: '002',
            label: '二星'
          },
          {
            key: '003',
            label: '三星'
          },
          {
            key: '004',
            label: '四星'
          },
          {
            key: '005',
            label: '五星'
          },
        ],
        taskOption: [{
            key: '0',
            label: '自动'
          },
          {
            key: '1',
            label: '手动'
          }
        ],
        taskStuatsOption: [{
            key: '0',
            label: '未开始'
          },
          {
            key: '1',
            label: '已完成'
          },
          {
            key: '2',
            label: '处理中'
          },
          {
            key: '3',
            label: '废弃'
          },
          {
            key: '4',
            label: '未分配'
          }
        ],
        QUALIFLAGOption:[{
            key: '0',
            label: '全部'
          },
          {
            key: '1',
            label: '已分配'
          },
          {
            key: '2',
            label: '未分配'
          }
        ],
        tableTotal: 0,
        pageSize: undefined,
        currentPage: 1, //表格当前页
        tableData: [
        ],
        ruleForm: {
          BATCHBEGINDATE: '',
          BATCHENDDATE: '',
          BATCHNO:'',//批次号
          CUSTOMLEVEL: '', //客户等级
          CHANNELTYPE: '', //渠道
          BUSINESSTYPE: '', //业务类型
          MEDIATYPE: '', //多媒体类型
          // AGENTLEVEL: '', //坐席级别
          TASKFLAG: '',//抽样标识  0-自动 1-手动
          TASKSTATUS: '',//任务状态  0-未开始 1-已完成 2-处理中
          // BATCHBEGINDATE: '',//抽样开始日期
          // BATCHENDDATE: '',//抽样结束日期
          QUALIFLAG: '0',//分配标识   0-全部 1-已分配 2-未分配
        },
        loading: false,
      }
    },
    computed: {},
    created() {
      this.pageSize = getGlobalParams.get("PageSize");
    },
    mounted() {
      if(this.$route.params.row!=undefined){
        this.getParams()
      }else{
        this.ruleForm.BATCHNO = ''
        this.ruleForm.TASKFLAG  = ''
        this.ruleForm.BATCHBEGINDATE = ''
        this.ruleForm.BATCHENDDATE = ''
        this.queryData()
      }
      
      this.mediaQuery()
      this.channelQuery()
      // this.batchQuery()
    },
    watch: {},
    methods: {
      //  开始日期
      changeStart() {
        this.pickerOptionsEnd = Object.assign({}, this.pickerOptionsEnd, {
          disabledDate: (time) => {
            if (this.ruleForm.BATCHBEGINDATE) {
              return time.getTime() < Date.parse(this.ruleForm.BATCHBEGINDATE.slice(0, 4) + '-' + this.ruleForm
                .BATCHBEGINDATE.slice(4, 6) +
                '-' + this.ruleForm.BATCHBEGINDATE.slice(6, 8)) - 8.64e7 || time.getTime() > Date.now();
            } else {
              return time.getTime() > Date.now();
            }
          }
        })
      },
      // 结束日期
      changeEnd() {
        this.pickerOptionsStart = Object.assign({}, this.pickerOptionsStart, {
          disabledDate: (time) => {
            if (this.ruleForm.BATCHENDDATE) {
              return time.getTime() > Date.parse(this.ruleForm.BATCHENDDATE.slice(0, 4) + '-' + this.ruleForm
                .BATCHENDDATE
                .slice(4, 6) + '-' +
                this.ruleForm.BATCHENDDATE.slice(6, 8)) || time.getTime() > Date.now();
            } else {
              return time.getTime() > Date.now();
            }
          }
        })
      },
      getParams(){
         let row = this.$route.params.row;
         this.ruleForm.BATCHNO = row.BATCHNO
         this.ruleForm.TASKFLAG = row.SAMPLFLAG
         this.ruleForm.BATCHBEGINDATE = row.OPERAWORKDATE
         this.ruleForm.BATCHENDDATE = row.OPERAWORKDATE
         this.queryData()
      },
      // 查询业务渠道
      async channelQuery() {
        let resBody = new dictionary();
        resBody.data.FIELDCODE = 'CHANNELTYPE'
        resBody.data.CurrPage = 1
        resBody.data.PageRowNum = 100
        let response = await requestWFM(resBody);
        if (response.SYS_HEAD.ReturnCode == "000000") {
          this.channelOption = response.BODY.FIEDATA;
        } else {
          this.$message({
            type: "error",
            message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage
          })
        }
      },
      // 查询多媒体类型
      async mediaQuery() {
        let resBody = new dictionary();
        resBody.data.FIELDCODE = 'MULMEDIATYPE'
        resBody.data.CurrPage = 1
        resBody.data.PageRowNum = 100
        let response = await requestWFM(resBody);
        if (response.SYS_HEAD.ReturnCode == "000000") {
          this.mediaOption = response.BODY.FIEDATA;
        } else {
          this.$message({
            type: "error",
            message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage
          })
        }
      },
      // 查询抽样结果
      async queryData() {
        let resBody = new dataQuery()
        resBody.data.BATCHNO = this.ruleForm.BATCHNO
        resBody.data.CUSTOMLEVEL = this.ruleForm.CUSTOMLEVEL
        resBody.data.CHANNELTYPE = this.ruleForm.CHANNELTYPE
        resBody.data.BUSINESSTYPE = this.ruleForm.BUSINESSTYPE
        resBody.data.MEDIATYPE = this.ruleForm.MEDIATYPE
        // resBody.data.AGENTLEVEL = this.ruleForm.AGENTLEVEL
        resBody.data.TASKFLAG = this.ruleForm.TASKFLAG
        resBody.data.TASKSTATUS = this.ruleForm.TASKSTATUS
        resBody.data.BATCHBEGINDATE = this.ruleForm.BATCHBEGINDATE
        resBody.data.BATCHENDDATE = this.ruleForm.BATCHENDDATE
        resBody.data.QUALIFLAG = this.ruleForm.QUALIFLAG
        resBody.data.CurrPage = this.currentPage + ''
        resBody.data.PageRowNum = this.pageSize + ''
        let response = await request(resBody);
        if (response.SYS_HEAD.ReturnCode == "000000") {
          this.tableData = response.BODY.RSPSTRUCT;
          this.tableTotal = response.BODY.TotalRowNum
        } else {
          this.$message({
            type: "error",
            message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage
          })
        }
      },
      // 抽样数据存储
      async saveSampleData() {
        let date = new Date()
        let year = date.getFullYear()
        let month = date.getMonth() + 1
        let day = date.getDate()
        month = month < 10 ? '0' + month : month
        day = day < 10 ? '0' + day : day
        let nowDate = year + '' + month + '' + day;
        let arr = []
        this.currentRow.forEach(item => {
          arr.push(item.COLLECTSERNO)
        })
        let resBody = new dataSave()
        resBody.data.COLLECTSERNO = arr.join(',')
        resBody.data.COLLECTDATE = nowDate
        resBody.data.COLLECTFLAG = '1' //1-手动
        resBody.data.SAMPLER = this.$store.getters.UserNum;
        let response = await request(resBody);
        if (response.SYS_HEAD.ReturnCode == "000000") {
          this.$message({
            type: 'success',
            message: '保存成功！'
          })
          this.queryData()
        } else {
          this.$message({
            type: "error",
            message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage
          })
        }
      },
      changePage(val) {
        this.currentPage = val;
        this.queryData()
      },
      handleSizeChange(val) {
        this.pageSize = val
        this.queryData()
      },
      handleCurrentChange(val) {
        this.currentRow = val;
        console.log("===="+JSON.stringify(this.currentRow))
      },
      // 重置查询条件
      clearForm(item) {
        // 重置表格
        this.$refs["" + item].resetFields();
      },
      dataFormat(row, column) {
        //格式化表格
        if (column.property == "CUSTOMLEVEL")
          // 001-非VIP 002-VIP黄金级 003-VIP铂金级 004-VIP钻石级
          return row[column.property]=='001'?'非VIP':row[column.property]=='002'?'VIP黄金级':row[column.property]=='003'?'VIP铂金级':row[column.property]=='004'?'VIP钻石级':row[column.property];
        
        if (column.property == "CUSTOMIDTYPE")
          // 001-身份证 002-军官证 003-其他
          return row[column.property]=='001'?'身份证':row[column.property]=='002'?'军官证':row[column.property]=='003'?'其他':row[column.property];
        
        if (column.property == "CALLTYPE")
          // 0-呼出 1-呼入
          return row[column.property]=='0'?'呼出':row[column.property]=='1'?'呼入':row[column.property];
        
        if (column.property == "AGENTLEVEL")
          // 001-一星 002-二星 003-三星 004-四星 005-五星
          return row[column.property]=='001'?'一星':row[column.property]=='002'?'二星':row[column.property]=='003'?'三星':row[column.property]=='004'?'四星':row[column.property]=='005'?'五星':row[column.property];
        
        if (column.property == "MEDIATYPE")
          // voice-电话 video-视频 chat-文字
          return row[column.property]=='voice'?'电话':row[column.property]=='video'?'视频':row[column.property]=='chat'?'文字':row[column.property];
        
        if (column.property == "CHANNELTYPE")
          // C001-电话  C002-微信  C003-PAD
          return row[column.property]=='C001'?'电话':row[column.property]=='C002'?'微信':row[column.property]=='C003'?'PAD':row[column.property];

        if (column.property == "BUSINESSTYPE")
          // 0-账务类 1-签约类 2-信息维护类 3-账户类 4-理财类，多个业务类型用“|”分隔
          return row[column.property]=='0'?'账务类':row[column.property]=='1'?'签约类':row[column.property]=='2'?'信息维护类':row[column.property]=='3'?'账户类':row[column.property]=='4'?'理财类':row[column.property];
        
        if (column.property == "SAMPLFLAG"||column.property == "COLLECTFLAG" || column.property == "TASKFLAG")
          // 0-自动 1-手动
          return row[column.property]=='0'?'自动':row[column.property]=='1'?'手动':row[column.property];
        
        if (column.property == "TASKSTATUS")
          // 0-未开始 1-已完成 2-处理中 3-废弃 4-未分配
          return row[column.property]=='0'?'未开始':row[column.property]=='1'?'已完成':row[column.property]=='2'?'处理中':row[column.property]=='3'?'废弃':row[column.property]=='4'?'未分配':row[column.property];
        if (column.property == "APPEALFLAG")
          return row[column.property]=='0'?'否':row[column.property]=='1'?'是':row[column.property]
      },
      detail(){
        this.detailOptions.row = this.currentRow;
        this.detailOptions.title = '抽样结果详情';
        this.detailOptions.isShow = true;
      }
    }
  }

</script>

<style rel="stylesheet/scss" lang="scss" scoped>

</style>
